import {useEffect,useRef} from 'react'
import * as echarts from 'echarts'

const ECharts = ({option})=>{
    const chartRef = useRef(null)
    let chartInstance = null

     useEffect(()=>{
       if(chartRef.current){
        chartInstance = echarts.init(chartRef.current)
        chartInstance.setOption(option)
       }

       return ()=>{
        if(chartInstance !== null&& !chartInstance.isDisposed()){
            chartInstance.dispose()
        }
       }
     },[option])


     return <div ref={chartRef} style={{ width: '100%', height: '400px' }}></div>
}

export default ECharts;